@charset "utf-8";
* {
	margin: 0;
	padding: 0;
	list-style: none;
}

body,
html {
	height: 100%;
	width: 100%;
}

.cube {
	width: 400px;
	height: 400px;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	transform-style: preserve-3d;
	animation: run 10s ease-in-out alternate-reverse infinite;
}

@keyframes run {
	0%,
	100% {
		transform: rotateX(0deg) rotateY(0deg);
	}
	50% {
		transform: rotateX(360deg) rotateY(360deg);
	}
}

/*@keyframes run1{
	
	50%{
		transform: translateZ(-400px);
	}
}

@keyframes run2{
	
	50%{
		transform: translateZ(400px)
	}
}*/

.side {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	text-align: center;
	line-height: 400px;
	font-size: 100px;
}

.front {
	background-color: skyblue;
	transform: translateZ(200px);
	animation: run2 10s ease-in-out alternate-reverse infinite;
	
}

.back {
	background-color: red;
	transform: translateZ(-200px) rotateY(180deg);
	animation: run1 10s ease-in-out alternate-reverse infinite;
	
}

.left {
	background-color: #00ff00;
	transform: rotateY(-90deg) translateZ(200px);
	animation: run2 10s ease-in-out alternate-reverse infinite;
	
}

.right {
	background-color: yellow;
	transform: rotateY(90deg) translateZ(200px);
	animation: run2 10s ease-in-out alternate-reverse infinite;
	
}

.top {
	background-color: blue;
	transform: rotateX(90deg) translateZ(-200px);
	animation: run1 10s ease-in-out alternate-reverse infinite;
	
}

.bottom {
	background-color: tan;
	transform: rotateX(-90deg) translateZ(-200px);
	animation: run1 10s ease-in-out alternate-reverse infinite;
	
}

